<template>
	<view class="container">
		<!-- <image class="tui-bg__img" src="/static/images/mall/wallet/bg_balance_detail.png" ></image> -->
		<view class="tui-content__box">
			<form @submit="bindSave">
				<view class="input-container">
					<text class="small">￥</text>
					<input v-model="amount" placeholder="充值金额" placeholder-class="tui-phcolor" type="text"
						maxlength="40" />
				</view>
				<view class="grid-items">
					<view class="grid-item" :class="{active:item==amount}" @click="amount = item"
						v-for="item in amountArr">{{item}}元</view>
				</view>
				<!-- <view class="tui-amount__box">
				<image class="tui-amount__img" src="/static/images/mall/wallet/bg_balance_amount.png" mode="widthFix">
				</image>
					<view class="tui-amount">
						<view><input v-model="amount" placeholder="充值金额" placeholder-class="tui-phcolor" type="text"
								maxlength="40" /></view>
					</view>
			</view> -->
				<!--<view class="tui-badge__box">
				<view class="tui-badge__title">活动</view>
				<view class="tui-badge__desc">充5000送2000</view>
			</view>-->
				<view class="tui-btn__box">
					<tui-button formType="submit" type="danger" height="70rpx" shape="circle">立即充值</tui-button>
				</view>
			</form>
		</view>

		<view class="tui-content__box">
			<view class="tui-btn__box">
				<tui-button type="primary" height="70rpx" shape="circle" @click="toWith">提现</tui-button>
			</view>
		</view>
		<view class="tui-content__box">
			<view class="tui-btn__box">
				<tui-button type="primary" height="70rpx" shape="circle" @click="showKeyboard">设置支付密码</tui-button>
			</view>
		</view>

		<t-pay-way :show="show" :amuont="setyouhuijine(setPayPoints(amount))" @goPay="goPay" :paymethod="paymethod"
			:paytype="paymentType" @close="popupClose"></t-pay-way>
			<tui-keyboard :show="showPwd" :radius="true" :action="true" @close="keyboardClose" @click="keyboardClick">
				<view class="tui-keyboard-tips">{{keyboardInfo.title}}</view>
				<tui-keyboard-input :inputvalue="showArr" :size="64"></tui-keyboard-input>
			</tui-keyboard>
	</view>
</template>

<script>
	import tPayWay from "@/components/views/t-pay-way/t-pay-way"
	import pay from '@/common/pay.js'
	export default {
		components: {
			tPayWay,
		},
		data() {
			return {
				paymentType: "",
				paymethod: [],
				allGoodsAndYunPrice: 0,
				show: false,
				amount: '',
				amountArr: [10, 30, 50, 100, 150, 200, 250, 300],
				showPwd: false,
				pwdArr:  ['','','','','',''],
				showArr: ['','','','','',''],
				pwdTitle: '',
				keyboardInfo : {
					type : 1,
					title : '请输入支付密码' 
				},
				keyInputIndex:0,
				hasPayPwd : 0
			}
		},
		onLoad() {
			let _this = this
			_this.$request.get('Order.paymethod').then(res => {
				if (res.errno == 0) {
					var data = [];
					for (var i in res.data) {
						if (res.data[i].code != 'balance_pay') {
							data.push(res.data[i])
						}
					}
					_this.paymethod = data;
					_this.paymentType = data[0].default;
				}
			});
		},
		methods: {
			showKeyboard() {
				this.showPwd = true
			},
			keyboardClose(){
				this.pwdArr = ['','','','','','']
				this.showArr = ['','','','','','']
				this.keyInputIndex = 0
				this.showPwd = false
				
				console.log(this.hasPayPwd)
				if(this.hasPayPwd == 1) {
					this.keyboardInfo.type = 1
					this.keyboardInfo.title = '请输入支付密码'
				}else{
					this.keyboardInfo.type = 2
					this.keyboardInfo.type.title = '请输入新支付密码'
				}
			},
			keyboardClick(e){
				let index = e.index + 1
				if(index == 10) {
					console.log('取消')
					this.keyboardClose()
					return
				}else if (index == 11){
					index = 0
				}else if (index == 12){
					console.log(this.keyInputIndex)
					if(this.keyInputIndex > 0){
						this.pwdArr[--this.keyInputIndex] = ''
						// this.keyInputIndex--
						this.showArr = this.getShowArr(this.keyInputIndex-1)
					}
					console.log(this.pwdArr)
					console.log(this.showArr)
					return
				}
				
				this.pwdArr[this.keyInputIndex] = index
				// this.showArr[this.keyInputIndex] = '·'
				this.showArr = this.getShowArr(this.keyInputIndex)
				this.keyInputIndex++
				
				console.log(this.pwdArr)
				console.log(this.showArr)
				
				if(this.keyInputIndex < 6){
					return
				}
				
				let pwd = this.pwdArr.join('')
				
				if(this.keyboardInfo.type == 1) {
					
					if(this.checkPayPwd(pwd)){
						this.keyboardInfo.type = 2
						this.keyboardInfo.title = '请输入新支付密码'
						
						this.pwdArr = ['','','','','','']
						this.showArr = ['','','','','','']
						this.keyInputIndex = 0
					}else{
						this.pwdArr = ['','','','','','']
						this.showArr = ['','','','','','']
						this.keyInputIndex = 0
					}
					console.log(this.keyboardInfo)
				}else if(this.keyboardInfo.type == 2) {
					this.keyboardInfo.type = 3
					this.keyboardInfo.title = '请确认支付密码'
					
					this.waitOkPwd = pwd
					
					this.pwdArr = ['','','','','','']
					this.showArr = ['','','','','','']
					this.keyInputIndex = 0
					console.log(this.keyboardInfo)
				}else{
					if(this.waitOkPwd != pwd) {
						uni.showModal({
							title: '提示',
							content: '两次密码不一致',
							showCancel: false
						})
						
						this.pwdArr = ['','','','','','']
						this.showArr = ['','','','','','']
						this.keyInputIndex = 0
					}else{
					    this.$request.post('member.update', {
							pay_pwd: pwd
						}).then(res => {
							if (res.errno == 0) {
								uni.showModal({
									title: '提示',
									content: '设置成功',
									showCancel: false
								})
								this.hasPayPwd = 1
								this.keyboardClose()
							}else{
								uni.showModal({
									title: '提示',
									content: '设置失败',
									showCancel: false
								})
								this.keyboardClose()
							}
						});
					}
				}
				
			},
			getShowArr(index){
				console.log(index)
				let res = []
				let i = 0
				while (i < 6){
					if(i <= index) {
						res.push('·')
					}else{
						res.push('')
					}
					i++
				}
				return res
			},
			async checkPayPwd(payPwd){
				await this.$request.post('member.checkPayPwd', {
					pay_pwd : payPwd
				},{
					samkey: (new Date()).valueOf()
				}).then(res => {
					if (res.errno == 0) {
						return true
					}else{
						uni.showModal({
							title: '提示',
							content: res.message,
							showCancel: false
						})
						return false
					}
				});
			},
			setyouhuijine: function(amount) {
				if (this.coupon_type == 10) {
					return parseFloat((amount - this.youhuijine).toFixed(2));
				} else {
					if (this.coupon_type == 20 && this.discount) {
						return parseFloat(((amount * this.discount) / 10).toFixed(2));
					}
				}
				console.log(parseFloat(amount))
				return parseFloat(amount);
			},
			setPayPoints: function(amount) {
				if (this.is_PayPoints == 1) {
					return (amount - this.totalPointsPrice).toFixed(2);
				} else {
					return amount;
				}
			},
			popupClose() {
				this.show = false
			},
			toWith() {
				uni.navigateTo({
					url: '/pagesA/my/withdraw/withdraw?mo=balance'
				})
			},
			goPay(e) {
				var payment_code = e.paymentType;
				const redirectUrl = "/pagesA/my/recharge/success";
				if (payment_code == 'wx_pay') {
					pay.wxpay('recharge', this.amount, 0, redirectUrl);
					return
				} else if (payment_code == 'hee_pay') {
					pay.heepay('recharge', this.amount, 0, redirectUrl);
					return
				} else if (payment_code == 'tt_pay') {
					pay.ttpay('recharge', this.amount, 0, redirectUrl);
					return
				}
				wx.showToast({
					title: '找不到支付方式',
					icon: 'none'
				})
			},
			async bindSave(e) {
				const _this = this
				const amount = _this.amount;
				if (amount == "" || amount * 1 < 0) {
					wx.showToast({
						title: '请填写正确的金额',
						icon: 'none'
					})
					return
				}
				wx.showModal({
					title: '请确认充值金额',
					content: '您本次充值 ' + amount + ' 元',
					confirmText: "确认支付",
					cancelText: "取消支付",
					success: function(res) {
						//console.log(res);
						if (res.confirm) {
							_this.show = true

						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.input-container {
		height: 100rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		background-color: #fff;
		border-bottom: 2rpx solid #eee;

		.small {
			font-weight: bold;
		}

		input {
			padding-left: 20rpx;
		}
	}

	.grid-items {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		padding: 20rpx 30rpx;
		gap: 20rpx;
		background-color: #fff;

		.grid-item {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100rpx;
			color: #666;
			border-radius: 8rpx;
			border: 1rpx solid #eee;

			&.active {
				background-color: #eb0909;
				color: #fff;
			}
		}
	}

	.container {
		width: 100%;
		padding-bottom: 48rpx;
	}

	.tui-bg__img {
		width: 100%;
		height: 230rpx;
	}

	.tui-content__box {
		width: 100%;
		box-sizing: border-box;
		position: relative;
		z-index: 2;
	}

	.tui-amount__box {
		width: 100%;
		height: 280rpx;
		background: #FFFFFF;
		box-shadow: 0 10rpx 14rpx 0 rgba(0, 0, 0, 0.06);
		border-radius: 10rpx;
		position: relative;
		display: flex;
		justify-content: center;
		flex-direction: column;
		padding-left: 52rpx;
		box-sizing: border-box;
	}

	.tui-amount__img {
		width: 342rpx;
		height: 248rpx;
		position: absolute;
		right: 0;
		bottom: 0;
		z-index: 1;
	}

	.tui-amount {
		font-size: 56rpx;
		font-weight: 500;
		color: #333333;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 10;
	}

	.tui-badge {
		height: 34rpx;
		background: #FFE5E5;
		border-radius: 6rpx;
		font-size: 25rpx;
		font-weight: 400;
		color: #EB0909;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 12rpx;
	}

	.tui-scale__text {
		transform: scale(0.8);
		transform-origin: center center;
	}

	.tui-recharge__text {
		font-size: 28rpx;
		font-weight: 400;
		color: #888888;
		padding-top: 16rpx;
		padding-left: 12rpx;
		box-sizing: border-box;
	}

	.tui-badge__box {
		display: inline-flex;
		align-items: center;
		height: 42rpx;
		background-color: #FFDBDB;
		border-radius: 6rpx;
		overflow: hidden;
		margin-top: 50rpx;
	}

	.tui-badge__title {
		height: 42rpx;
		color: #fff;
		background-color: #EB0909;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 10rpx;
	}

	.tui-badge__desc {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-weight: 400;
		color: #EB0909;
		padding: 0 10rpx;
	}

	.tui-explain__box {
		padding-top: 60rpx;
		font-weight: 400;
		color: #333333;
	}

	.tui-title {
		font-size: 30rpx;
		padding-bottom: 8rpx;
	}

	.tui-desc {
		font-size: 26rpx;
		padding-top: 12rpx;
	}

	.tui-btn__box {
		width: 500rpx;
		margin: 40rpx auto 0;
	}
	/deep/ .tui-keyboard-tips {
		margin: 40rpx 40rpx 0 40rpx;
	}
	/deep/ .tui-inner-box {
		margin-top: 40rpx;
		margin-bottom: 60rpx;
	}
	/deep/ .tui-inner-box .tui-input {
		width: 80rpx !important;
		height: 80rpx !important;
		border: none !important;
		background: #eee !important;
		border-radius: 20rpx;
	}
</style>